<template>
	<view class="index_wrap">
		<view class="index_btom">
			<!-- 小区内消息设置 -->
			<view class='index_resi_quar'>
				<view class="index_resi_quar_box"></view>
				<view class="index_resi_quar_cont">


					<view class="u-p-30" style="padding-bottom:0 !important ;" v-if="transfer">
						<view class=" u-m-b-20">
							<text style="color: #333;width:144rpx;display: inline-block;font-weight: 600;"
								class="u-font-28">
								现业主姓名
							</text>
							<text style="float: right;font-weight: 1000;display: inline-block"
								class="u-font-28 u-flex-1">
								{{transfer.userName}}
							</text>
						</view>

						<view class="u-m-b-20">
							<text style="color: #333;width:144rpx;display: inline-block;font-weight: 600;"
								class="u-font-28">
								楼宇号
							</text>
							<text style="float: right;font-weight: 1000;display: inline-block"
								class="u-font-28 u-flex-1">
								{{transfer.roomName.project_name}}{{transfer.roomName.build_district_code}}{{transfer.roomName.build_tower_code+'号楼'}}{{transfer.roomName.room_unit_number+'单元'}}{{transfer.roomName.room_code+'室'}}
							</text>
						</view>
						<view class=" u-m-b-20">
							<text style="color: #333;width:144rpx;display: inline-block;font-weight: 600;"
								class="u-font-28">
								入住时间
							</text>
							<text style="float: right;font-weight: 1000;display: inline-block"
								class="u-font-28 u-flex-1">
								{{transfer.new_ruzhu_time}}
							</text>
						</view>

					</view>

					<view class="" style="background-color: #F1F1F1;height: 10rpx;" v-if="transfer">
					</view>

					<view class="u-p-30" v-if="transfer">




						<view class="u-m-b-20">
							<text style="color: #333;width:144rpx;display: inline-block;font-weight: 600;"
								class="u-font-28">
								原业主姓名
							</text>
							<text style="float: right;font-weight: 1000;display: inline-block"
								class="u-font-28 u-flex-1">
								{{transfer.room_owner_name}}
							</text>
						</view>
						<view class="u-m-b-20">
							<text style="color: #333;width:144rpx;display: inline-block;font-weight: 600;"
								class="u-font-28">
								电话号码
							</text>
							<text style="float: right;font-weight: 1000;display: inline-block"
								class="u-font-28 u-flex-1">
								{{transfer.room_owner_tel}}
							</text>
						</view>
						<view class="u-m-b-20">
							<text style="color: #333;width:144rpx;display: inline-block;font-weight: 600;"
								class="u-font-28">
								身份证号码
							</text>
							<text style="float: right;font-weight: 1000;display: inline-block"
								class="u-font-28 u-flex-1">
								{{transfer.id_card}}
							</text>
						</view>
						<view class="u-m-b-20">
							<text style="color: #333;width:144rpx;display: inline-block;font-weight: 600;"
								class="u-font-28">
								变更时间
							</text>
							<text style="float: right;font-weight: 1000;display: inline-block"
								class="u-font-28 u-flex-1">
								{{transfer.begin_time}}
							</text>
						</view>
						<view class="u-m-b-20">
							<text style="color: #333;width:200rpx;display: block;font-weight: 600;" class="u-font-28">
								身份证正反面
							</text>
							<image mode="aspectFill" :src="transfer.id_card_just"
								style="width: 100px;height: 100px;margin-top: 12px;"></image>
							<image mode="aspectFill" :src="transfer.id_card_back"
								style="width: 100px;height: 100px;margin-top: 12px;margin-left: 12px;"></image>
						</view>
						<view class="u-m-b-20">
							<text style="color: #333;width:144rpx;display: block;font-weight: 600;" class="u-font-28">
								购房合同
							</text>
							<image mode="aspectFill" :src="transfer.room_owner_image"
								style="width: 100px;height: 100px;margin-top: 12px;"></image>
						</view>
					</view>
					<view v-else>
						<view style="width: 232px;height: 242px;margin: 0px auto;">
							<image style="width: 100%;height: 100%;margin-top: 100px;"
								src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/zanwushuju.png" mode=""></image>
						</view>
						<view style="width: 62%;margin: 122px auto;text-align: center;color: #999;">暂无数据</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				housingFlag: true,
				roomId: null,
				transfer: null,
			}
		},
		onLoad(option) {
			if (option.roomId != null) {
				this.roomId = option.roomId;
			}
			this.checkLogin();
		},
		onPullDownRefresh() {
			this.checkLogin();
		},
		methods: {
			// 验证是否登录或实名认证
			checkLogin() {
				let _this = this
				if (uni.getStorageSync('phone')) {
					if (uni.getStorageSync('loginFlag')) {
						if (!uni.getStorageSync('hourseList')) {
							this.$openInvite()
						} else {
							_this.showFlag = true
							_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							_this.name = _this.homelist.proName;
							_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' +
								_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode
							_this.getTableData()
						}
					} else {
						uni.showModal({
							title: '请先实名认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/homePage1/realName/realName'
									})
								}
							}
						});
					}
				} else {
					uni.showModal({
						title: '请先登录',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								console.log('a')
								_this.$Router.pushTab({
									path: '/pages/user/user'
								})
							}
						}
					});
				}
				uni.stopPullDownRefresh()

			},
			getTableData() {
				uni.showLoading({
					title: '加载中'
				});
				this.$request.api.getTransfer({
					pageIndex: 1,
					room_id: this.roomId
				}).then(res => {
					if (res.data.code == 0) {
						if (res.data.data.datalist.length > 0) {
							this.transfer = res.data.data.datalist[0]
						}
					}
					uni.hideLoading();
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 18px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;
		font-weight: 500;
		color: #333333;
		line-height: 41px;
		position: relative;
	}

	.title_btm {
		position: absolute;
		width: 79px;
		height: 6rpx;
		opacity: 0.6;
		border-radius: 6px;
		bottom: 4rpx;
		left: 6rpx;
		background: linear-gradient(70deg, #447A05, rgba(69, 124, 5, 0.1));
	}
	.u-m-b-20 {
		margin-bottom: 20px !important;
	}
	.rect {
		width: 80%;
		height: auto;
		background-color: #FFFFFF;
	}

	.index_wrap {
		width: 100vw;
		height: auto;
		overflow: hidden;
	}

	.index_wrap .a {
		width: calc(100vw - 60rpx);
		margin: 0 auto 20rpx;
		height: 36vw;
		border-radius: 6px;
		overflow: hidden;
	}

	.index_wrap .a .swiper_img {
		width: 100%;
	}

	.index_wrap .index_btom {
		width: 100vw;
		height: auto;
		overflow: hidden;
		background: #FAFAFA;
	}

	.index_wrap .index_resi_quar {
		width: 100vw;
		height: 1000px;
		position: relative;
	}

	.index_wrap .index_resi_quar .index_resi_quar_box {
		width: 100vw;
		height: 120rpx;
		background: #F1F1F1;
	}

	.index_wrap .index_resi_quar .index_resi_quar_cont {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 20rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0px 3px 20px 0px rgba(51, 51, 51, 0.1);
	}

	.index_wrap .index_resi_quar .index_resi_quar_cont .index_resi_quar_cont_title {
		width: calc(100% - 40rpx);
		height: 90rpx;
		margin: auto;
		border-bottom: 1px solid #ddd;
		font-size: 36rpx;
		font-weight: 550;
		color: #333;
		line-height: 100rpx;
	}

	.index_wrap .index_resi_quar .index_resi_quar_cont .index_resi_quar_cont_title .index_resi_quar_cont_title_right {
		font-size: 24rpx;
		color: #2986FF;
		height: 28rpx;
		float: right;
		margin: 6rpx 20rpx 0 0;
	}

	.index_wrap .index_btom .index_resi_quar .index_resi_quar_cont .index_resi_quar_cont_cent {
		width: 100%;
		height: calc(100% - 91rpx);
		overflow: hidden;
	}

	.index_wrap .index_btom .index_resi_quar .index_resi_quar_cont .index_resi_quar_cont_cent .index_resi_quar_cont_cent_txt {
		width: 100%;
		height: auto;
		text-align: center;
		margin: 70rpx 0 0;
	}

	.index_wrap .index_btom .index_resi_quar .index_resi_quar_cont .index_resi_quar_cont_cent .index_resi_quar_cont_cent_btn {
		width: 370rpx;
		height: 90rpx;
		margin: 40rpx auto 0;
	}

	.index_wrap .index_resi_quar .index_resi_quar_cont .index_resi_quar_cont_cent .index_resi_quar_cont_cent_btn button {
		width: 100%;
		height: 100%;
		background: #F9A832;
		line-height: 90rpx;
		border-radius: 50rpx;
	}

	.index_wrap.index_resi_quar2 {
		width: 100%;
		height: auto;
		min-height: 60rpx;
		background: #FBFBFB;
	}

	.index_wrap .index_resi_quar2 .index_resi_quar2_gg {
		width: calc(100% - 60rpx);
		height: 250rpx;
		margin: 60rpx auto 60rpx;
	}

	.index_wrap .index_resi_quar2 .index_resi_quar2_gg image {
		width: 100%;
		height: 100%;
	}

	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;

		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}
			.repair-6 {
				color: #666;
			}
		}
	}
</style>